<template>
	<view class="cart">
		<view class="cart-info" v-if="showCart">
			<view class="cart-info-desc">
				<view>
					<view>已选商品</view>
					<view>打包费{{cart_info.packagingPrice}}元</view>
				</view>
				<view>清空</view>
			</view>
			<view>
				<view class="cart-card" v-for="item in cart_info.cartItems" :key="item.id">
					<view>logo</view>
					<view>
						<view>{{item.dishName}}</view>
						<view>{{item.specification}}</view>
						<view class="cart-card-action">
							<view>{{item.price}}</view>
							<view><u-number-box v-model="item.quantity"></u-number-box></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="add-cart">
			<view class="add-cart-info">
				<view class="cart-icon" @click="onShowCart">
					<ali-icon icon_class='icon-gouwuchekong'></ali-icon>
					<u-badge :value="5" :offset='[0, -10]' :absolute="true"></u-badge>
				</view>
				<view>
					<view>总价</view>
					<view>配送费</view>
				</view>
			</view>
			<view class="review_order"><button class="" @click="review_order">去结算</button></view>
		</view>
	</view>
</template>

<script>
	import {get_cart} from '@/api/cart.js'
	export default {
		name: "add-cart",
		data() {
			return {
				showCart: false,
				cart_info:{}
			};
		},
		methods: {
			onShowCart() {
				this.showCart = !this.showCart
				if(this.showCart){
					get_cart(1).then(res=>{
						this.cart_info = res
					})
				}
			},
			review_order() {
				uni.$u.route({
					url: '/pages/order/order'
				})
			}
		}
	}
</script>

<style scoped>
	.cart {
		width: 100%;
	}

	.cart-info {
		background-color: beige;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
	}

	.cart-info-desc {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30upx;
		padding: 5upx 20upx;
	}

	.cart-info-desc>view:first-child {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cart-card-action {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cart-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15upx 20upx;
	}

	.cart-card>view:first-child {
		width: 30%;
	}

	.cart-card>view:last-child {
		flex: 1;
	}

	.add-cart {
		width: 100%;
		height: 100upx;
		background-color: #c68a8a;

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
	}

	.add-cart-info {
		display: flex;
	}

	.cart-icon {
		position: relative;
		margin-right: 50upx;
		margin-left: 20upx;
	}

	.review_order {
		display: flex;
		justify-content: flex-end;
		margin-right: 20upx;
	}

	.review_order>button {
		width: 200upx;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 90upx;
	}
</style>